<template>
<view>
	<view class="header_m">
		<view class="m_title">发布会议</view>
		<view class="m_item">400-962-5108</view>
		<view class="m_item">可联系管理员进行发布和资料补充</view>
		<view class="img"></view>
	</view>
	<!-- <image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/bg2.jpg" mode="widthFix" style="width: 100%;"></image> -->
	<view class="content">
	<view class="item_i"><view class="item_t must">会议标题</view> <input class="right" placeholder="请输入会议标题" type="text" v-model="form.title" /></view>
	<view class="item_i"><view class="item_t must">会议类型</view>
		<picker class="right" @change="typeChange" :range="typeList" range-key='name'>
			<view class="right">{{form.type_id?type_name:'请选择类型'}}</view>
		</picker>
	</view>
	<view class="item_i"><view class="item_t ">相关产业链</view> 
		<view class="right text" @click="toChooseChain">{{form.chain_names||'请输入选择产业链'}}</view>
	</view>
	
	<view class="item_i"><view class="item_t must">举办城市</view>
		<picker class="right" @change="cityChange" @columnchange='cityChange1' mode = 'multiSelector' :range="cityList" range-key='city_name'>
			<view class="right">{{form.city_names||'请选择城市'}}</view>
		</picker>
	</view>
	
	<view class="item_i"><view class="item_t must">会议地点</view>
		<view class="right" @click="getAddress"> {{address||'输入会议地址'}}</view>
	  <!-- <input class="right" placeholder="请输入会议地点"  type="text" :value="form.address" /> -->
	</view>
	<view class="item_i"><view class="item_t">房间号<view class="ps" style="width: 64px;color:red"></view></view> <textarea class="right" style="height: 60px;width: calc(100% - 70px);" maxlength='200' type="text" placeholder="请输入详细地址"  v-model="form.room" /></view>
	<view class="item_i"><view class="item_t must">报名日期</view> 
		<view class="right" :class="{small:form.signstarttime}" @click="DatePicker([form.signstarttime,form.signendtime],'sign')">{{form.signstarttime?form.signstarttime + '~' + form.signendtime:'请选择日期时间'}}</view>
		<!-- <input class="right"  placeholder="请输入报名日期"  type="text" :value="" /> -->
	</view>
	
<!-- 	<view class="item_i"><view class="item_t must">报名结束日期</view> 
	<view class="right" @click="DatePicker(form.signendtime,'signendtime')">{{form.signendtime||'请选择日期时间'}}</view>
	</view> -->
	
	<view class="item_i"><view class="item_t must">会议日期</view> 
		<view class="right" :class="{small:form.starttime}" @click="DatePicker([form.starttime,form.endtime],'hy')">{{form.starttime?form.starttime + '~' + form.endtime:'请选择日期时间'}}</view>
	</view>
	
<!-- 	<view class="item_i"><view class="item_t must">会议结束日期</view>
	<view class="right" @click="DatePicker(form.endtime,'endtime')">{{form.endtime||'请选择日期时间'}}</view>
	</view> -->
	
	<view class="item_i"><view class="item_t short must">报名是否开启审核</view><switch color="#4CD964" :checked='form.ischeck==1?true:false' @change="changeO(val)" /></view>
	<view class="item_i"><view class="item_t short">占位图(最多两张)</view><view @click="chooseImage" class="btn">上传</view >
		<view class="img">
			<view class="image" v-for="(item,index) in list" v-show="list.length>0" :key='index'>
				<image :src="item.url" mode=""></image>
				<image class="close" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/close.png" mode="widthFix" @click="delImg(index)"></image>
			</view>
		</view>
	</view>
	<!-- <view class="item_i"><view class="item_t must">会议联系人</view> <input class="right" placeholder="请输入姓名" type="text" v-model="form.contact" /></view> -->
	<!-- <view class="item_i"><view class="item_t must">联系手机号</view> -->
<!-- 		<view class="mobile">
			<input class="right" placeholder="请输入手机号"  type="text" v-model="form.mobile" />
			<button  open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" class="btn">获取</button >
		</view>
	</view> -->
	<view class="item_i"><view class="item_t">会议议程 <text class="ps" style="color:red;margin-left: 20px;">可联系管理员补充</text></view> <textarea class="right" style="height: 60px;width: calc(100% - 70px);" maxlength='200' type="text" placeholder="请输入详情"  v-model="form.content" /></view>
	</view>
	<view class="" style="width: 100%;height: 100px;">
		
	</view>
	<mx-datepicker :show='showPicker' format="yyyy-mm-dd hh:ii" type="rangetime" @cancel='showPicker=false' @confirm='changeT' :value='value'></mx-datepicker>
	<view class="bottom1" :style="{'padding-bottom': bottom_iphone?20 + 'rpx':''}">
		<view class="btn1" @click="submit">发布</view>
	</view>
	<choose-chain ref="chooseChain" :chainList='chainList' @getChain='cChain'></choose-chain>
</view>
</template>

<script>
	import WXBizDataCrypt from "@/utils/WXBizDataCrypt.js";  
	import mxDatepicker from '@/components/mx-datepicker/mx-datepicker.vue'
	import chooseChain from '@/components/chooseChain/chooseChain.vue'
	import { GetChildrenCity , myIndustrychain1 ,hy,GetUseInfo} from '@/utils/api.js'
	export default {
		data() {
			return {
				form:{
					title:'',
					address:'',
					signstarttime:'',
					signendtime:'',
					starttime:'',
					endtime:'',
					ischeck:1,
					content:'',
					image:'',
					city_ids:'',
					city_names:'',
					chain_names:'',
					chain_ids:'',
					type_id:'',
					contact:'',
					mobile:'',
					room:'',
				},
				address:'',
				type_name:[],
				typeList:[{name:'网洽会',id:1},{name:'招商会',id:1},{name:'专题会',id:3}],
				showPicker:false,
				value:'',
				list:[],
				chain:[],
				chainList:[],
				type:'',
				cityList:[[{city_name:'请选择',id:''}],[{city_name:'请选择',id:''}],[{city_name:'请选择',id:''}]],
				bottom_iphone:uni.getStorageSync('bottom')||false
			}
		},
		components:{
			mxDatepicker,
			chooseChain
		},
		created(){
			this.getChain()
			this.getCity(1,0)
			GetUseInfo().then(res=>{
				this.form.contact = res.data.nickname
				this.form.mobile = res.data.mobile
			})
		},
		onLoad(){
			
		},
		methods: {
			onGetPhoneNumber(e){
				if(e.detail.errMsg=="getPhoneNumber:fail user deny"){       //用户决绝授权  
					//拒绝授权后弹出一些提示  
				}else{      //允许授权  
					let pc = new WXBizDataCrypt('wx5a4e1142951d4004',uni.getStorageSync('session_key'));  //wxXXXXXXX为你的小程序APPID  
					let data = pc.decryptData(e.detail.encryptedData , e.detail.iv);  
					this.form.mobile = data.phoneNumber
				}  
			},
			getAddress(){
				uni.chooseLocation({
					success: e => {
						this.address = e.address
						this.form.lat = e.latitude
						this.form.lng = e.longitude
					}
				}) 
			},
			getCity(city_id,index){
				if(index==1){
					this.cityList[2] = [{city_name:'请选择',id:''}]
				}
				GetChildrenCity({city_id}).then(res=>{
					res.data.unshift({city_name:'请选择',id:''})
					this.cityList[index] = res.data
					this.cityList.push({})
					this.cityList.pop()
				})
			},
			typeChange(val){
				this.type_name = this.typeList[val.detail.value].name
				this.form.type_id = this.typeList[val.detail.value].id
			},
			cityChange(val){
				this.form.city_ids= ''
				this.form.city_names= ''
				val.detail.value.forEach((item,index)=>{
					this.form.city_ids += this.cityList[index][item].id?  this.cityList[index][item].id + ',' :''
					this.form.city_names += this.cityList[index][item].id?  this.cityList[index][item].city_name + ',' :''
				})
				this.form.city_ids=this.form.city_ids.slice(0,this.form.city_ids.length-1)
				this.form.city_names=this.form.city_names.slice(0,this.form.city_names.length-1)
			},
			cityChange1(x,y){
				if(x.detail.value==0&&x.detail.column<2){
					this.cityList[x.detail.column+1] = [{city_name:'请选择',id:''}]
				}
				if(x.detail.column==2||x.detail.value==0){
					return
				}
				let index = x.detail.column
				let city_id = this.cityList[index][x.detail.value].id
				this.getCity(city_id,index+1)
			},
			cChain(list){
				this.chain = list
				this.form.chain_names=''
				this.form.chain_ids=''
				this.chain.forEach((item,index)=>{
					this.form.chain_names += item.chain_name + ','
					this.form.chain_ids += item.chain_id + ','
				})
				this.form.chain_names=this.form.chain_names.slice(0,this.form.chain_names.length-1)
				this.form.chain_ids=this.form.chain_ids.slice(0,this.form.chain_ids.length-1)
			},
			getChain(){
				if(uni.getStorageSync('mychain')){
					this.chainList=JSON.parse(uni.getStorageSync('mychain'))
					return
				}
				myIndustrychain1().then(res=>{
					this.chainList=res.data
					uni.setStorageSync('mychain',JSON.stringify(this.chainList))
				})
			},
			toChooseChain(){
				this.$refs.chooseChain.show(this.chain)
			},
			DatePicker(val,type){//显示
				this.showPicker = true;
				this.value = val;
				this.type = type
			},
			changeT(val){
				if(this.type == 'hy'){
					this.form.starttime = val.value[0]
					this.form.endtime = val.value[1]
				}else{
					this.form.signstarttime = val.value[0]
					this.form.signendtime = val.value[1]
				}
				this.showPicker = false;
			},
			changeO(val){
				this.form.ischeck = this.form.ischeck == 1 ? 0:1
			},
			delImg(index){
				this.list.splice(index,1)
			},
			chooseImage(){
				uni.chooseImage({
					success:(res)=>{
						const tempFilePaths = res.tempFilePaths;
						uni.showLoading({ mask:true,
							title:'正在上传'
						})
						tempFilePaths.forEach((item,index)=>{
							uni.uploadFile({
								url:'https://bigdataapi.parkic.com/api/UploadFife',		//post请求的地址
								filePath:item,
								name:'file',	
								success: (uploadFileRes) => {
									var obj = JSON.parse(uploadFileRes.data);
									if(index>1){
										uni.hideLoading()
										return
									}
									this.list.push({url:obj.data.url})
									if(index==(tempFilePaths.length-1)){
										uni.hideLoading()
									}
								},
								fail:(err)=>{
									uni.showToast({
										title:'上传失败',
										icon:'none'
									})
								}
							})
						})
					}
				})
			},
			submit(){
				console.log(this.form)
				if(!this.form.title|| !this.form.contact || !this.form.mobile || !this.address ||!this.form.signstarttime ||!this.form.signendtime ||!this.form.starttime ||!this.form.endtime ||!this.form.city_ids ){
					uni.showToast({
						icon:'none',
						title:'请输入必填项'
					})
					return
				}
				if(this.list.length>0){
					this.list.forEach(item=>{
						this.form.image += item.url +','
 					})
					this.form.image=this.form.image.slice(0,this.form.image.length-1)
				}
				hy.MeetingPost(this.form).then(res=>{
					if(res.status==1){
						uni.showToast({
							title:'发布成功'
						})
						setTimeout(()=>{
							uni.switchTab({
								url:'../my/my'
							})
						},1000)
					}else{
						uni.showToast({
							title:'发布失败',
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.header_m{
	background: linear-gradient(90deg, #FF8900 0%, #FF5100 100%);
	width: 100%;
	height: 144px;
	position: relative;
	color: #fff;
	.m_title{
		font-size: 28px;
		font-weight: 800;
		font-style: italic;
		padding: 20px 20px 6px 20px;
	}
	.m_item{
		font-size: 14px;
		margin: 5px 20px;
	}
	.img{
		position: absolute;
		right: 24px;
		bottom: 10px;
		background: url(https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/fb_hm.png) no-repeat;
		background-size: 100% 100%;
		height: 110px;
		width: 120px;
	}
}
.short{
	width: 140px !important;
	margin-bottom: 0 !important;
}
.small{
	font-size: 14px;
}
.text{
	width: 70%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bottom1{
	position: fixed;
	bottom: 0;
	width: calc(100% - 20px);
	padding: 0 10px;
	height: 66px;
	background: #FFFFFF;
	display: flex;
	z-index: 100;
	box-shadow: 0px -2px 2px #e7e7e7;
	.btn1{
		width: 100%;
		height: 42px;
		margin: auto;
		background-color: #f93;
		border-radius: 8px;
		font-size: 18px;
		font-weight: 800;
		color: #fff;
		text-align: center;
		line-height: 42px;
	}
}
.content{
	height: calc(100% - 40px);
	overflow: auto;
	position: relative;
	top: -20px;
	border-radius: 20px 20px 0 0;
	padding: 10px 0 0;
	background-color: #fff;
}
.item_i{
	width: calc(100% - 24px);
	padding: 14px 12px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid #e7e7e7;
	.mobile{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
	input{
		width: 100%;
	}
	.img{
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin: 15px 0 0;
		.image{
			width: 48%;
			height: 100px;
			position: relative;
			.close{
				position: absolute;
				right: -8px;
				top: -8px;
				width: 16px;
				height: 16px;
			}
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.item_t{
		position: relative;
		width: 100%;
		left: 8px;
		font-size: 14px;
		color:#333;
		margin-bottom: 14px;
	}
	.right{
		// text-align: right;
		width: 100%;
		color: #666;
	}
	.iphone{
		display: flex;
		align-items: center;
	}
	.btn{
		width: 52px;
		font-size: 14px;
		color: #fff;
		background: #ff9933;
		border-radius: 4px;
		height: 26px;
		line-height: 26px;
		text-align: center;
		margin-left: 4px;
		margin-right: 0px;
		padding: 0;
	}
	
	.must::before{
		position: absolute;
		content:' ';
		background: url(https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/must.png) no-repeat;
		background-size: 100% 100%;
		width: 8px;
		height: 8px;
		top: 6px;
		left: -12px;
	}
}
</style>
